<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>宝贝详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/goods-detail.css" />
	</head>

	<body style="background-color: white;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">宝贝详情</h1>
		</header>

		<div class="mui-content" id="main">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<img :src="userface_path+userface" class="userface">
					<div class="user-info">
						<div class="nickname">{{nick_name}}</div>
						<div class="time-campus">发布于{{createTimeText}} {{campus}}</div>
					</div>
				</li>
			</ul>
			<div class="priceBox">
				<span class="price">&yen;{{price}}</span>
				<span class="originalPrice">&yen;{{originalPrice}}</span>
			</div>
			<div class="des">
				{{des}}
			</div>
			<img v-for="pic in pictureArray" :src="goods_img_paht+pic" style="width:100%;padding-left: 10px;padding-right: 10px;">
			<ul class="mui-table-view" style="margin-bottom: 80px;">
				<li class="mui-table-view-cell">留言</li>
				<!--<li class="mui-table-view-cell" v-if="messageList!=null" v-for="message in messageList">
					<img :src="userface_path+userface" class="userface">
					<div class="user-info">
						<div class="nickname">{{message.fromUserId}}</div>
						<div id="message">{{message.message}}</</div>
						</div>
				</li>-->
				<li class="mui-table-view-cell" v-for="message in messageList" v-if="message.parentMessageId==-999">
					<div class="firstMessage">
						<img :src="userface_path+message.from_user_face" class="userface" />
						<div class="user-info" @click="open_message_to_user_box(message)">
							<div class="nickname">{{message.from_user_nick_name}}</div>
							<div id="message">{{message.message}}</</div>
							</div>
							<P>{{message.createTimeText}}</P>
						</div>
						<div class="otherMessage" v-for="m in messageList" v-if="m.parentMessageId ==message.id">
							<img :src="userface_path+m.from_user_face" class="userface" />
							<div class="user-info" @click="open_message_to_user_box(m,message.id)">
								<div class="nickname">{{m.from_user_nick_name}}</div>
								<div id="message">{{m.from_user_nick_name}} 回复了 {{m.to_user_nick_name}}: {{m.message}}</</div>
								</div>
								<P>{{m.createTimeText}}</P>
							</div>
				</li>

			</ul>

			</div>
			<div id="messageBox" class="box mui-popover mui-popover-action mui-popover-bottom" style="background-color: white;width: 100%;height: 80px;padding-top: 20px;">
				<input type="text" id="messageText" placeholder="说点什么吧" /><button id="sendBtn" class="sendBtn">发送</button>
			</div>

			<footer class="mui-bar mui-bar-tab" id="foot">

				<span @click="open_message_box(id,userId)" class="margin_left10 a_message"><i class="mui-icon mui-icon-chatbubble"></i>留言</span>
				<span @click="cancelCollectionGoods(id)" v-if="isCollection===0" class="margin_left15" id="collection"><i class="mui-icon mui-icon-starhalf" style="color: orange;padding-top: 18px;"></i>取消收藏</span>
				<span @click="collectionGoods(id)" v-if="isCollection===1" class="margin_left15" id="collection"><i class="mui-icon mui-icon-starhalf" style="padding-top: 18px;"></i>收藏</span>
				<button v-if='sellStatus==30&&orderId==null' class="buyBtn" onclick="open_goods_buy()">立即购买</button>
				<button v-if='sellStatus==30&&orderId!=null' class="buyBtn" @click="open_order_detail(orderId)">我要付款</button>
				<div  v-if='sellStatus==31' style="float: right;margin-top:22px;color: #777777;margin-right: 20px;">已售出</div>			
			</footer>

			<script src="../js/mui.min.js"></script>
			<script type="text/javascript" src="../js/const.js"></script>
			<script type="text/javascript" src="../js/request.js"></script>
			<script type="text/javascript" src="../js/goods_service.js"></script>
			<script type="text/javascript" src="../js/message_service.js"></script>
			<script type="text/javascript" src="../js/order_service.js" ></script>
			<script type="text/javascript" src="../js/vue.min.js"></script>
			<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
			<script type="text/javascript" src="../js/check_service.js"></script>
			<script type="text/javascript">
				mui.init({
					longtap: true,
				});

				function getDefaultData() {
					return {
						id: '',
						title: '',
						des: '',
						goodsType: '',
						phone: '',
						campus: '',
						createTimeText: '',
						userface: '',
						nick_name: '',
						pictureArray: [],
						price: '',
						messageList: [],
						originalPrice: '',
						

						goods_img_paht: GOODS_IMG_PATH + '/',
						userface_path: USER_FACE_PATH + '/'
					}
				}

				//vue对象
				var data_detail = new Vue({
					el: '#main',
					data: getDefaultData(),
					methods: {
						resetData: function() { //重置数据
							Object.assign(this.$data, getDefaultData());
						},
						open_message_to_user_box: function(message, parentMessageId) {
							$("#messageText").attr('placeholder', "回复" + message.from_user_nick_name);
							mui("#messageBox").popover('toggle', document.getElementById(main));
							if(parentMessageId == undefined) { //说明回复的是一级留言
								$("#sendBtn").attr('onclick', 'sendMessage(' + message.goodsId + ',' + message.toUserId + ',' + message.id + ')');
							} else {
								console.log(message.goodsId+"to:"+message.fromUserId + ',' + parentMessageId);
								$("#sendBtn").attr('onclick', 'sendMessage(' + message.goodsId + ',' + message.fromUserId + ',' + parentMessageId + ')');
							}

						},
					}
				});

				var collection = new Vue({
					el: '#foot',
					data: {
						isCollection: 1,
						id: '',
						userId: '',
						orderId: '',
						sellStatus:'',
					},
					methods: {
						cancelCollectionGoods: function(id) { //取消收藏
							var res = goodsService.cancelCollectionGoods(id);
							plus.nativeUI.toast(res.msg);
							get_goods_info(id);
						},
						collectionGoods: function(id) { //收藏
							var res = goodsService.collectionGoods(id);
							plus.nativeUI.toast(res.msg);
							get_goods_info(id);

						},
						open_message_box: function(goodsId, toUserId) {
							$("#messageText").attr('placeholder', "说点什么吧");
							mui("#messageBox").popover('toggle', document.getElementById(main));
							$("#sendBtn").attr('onclick', 'sendMessage(' + goodsId + ',' + toUserId + ')');
						},
						open_order_detail: function(id) {
							var res = orderService.find_order(id);
							console.log(JSON.stringify(res.data));
							mui.openWindow({
								id: 'order.html',
								url: 'order.html',
								extras: {
									order: res.data,
		
								}
							});
						}
					}

				});

				mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					//添加hide事件，清空页面数据，滚到最顶部
					self.addEventListener('hide', function(e) {
						window.scrollTo(0, 0);
						data_detail.resetData();
					}, false);

				});

				//添加goodsId自定义事件
				window.addEventListener("goodsId", function(event) {
					//获取事件参数
					//				console.log(JSON.stringify(event));
					var id = event.detail.id;
					//				console.log(JSON.stringify(event.detail));
					plus.nativeUI.showWaiting('加载中', {
						width: '100px',
						height: '100px'
					});
					var res = goodsService.find_goods(id);
					//					if(res.resultCode===10){
					//						plus.nativeUI.closeWaiting();
					//						plus.nativeUI.toast(res.msg);
					//						mui.back();
					//						return;
					//					}
					//					checkService.check_request_result(res);
					data_detail.des = res.data.des;
					data_detail.nick_name = res.data.nick_name;
					data_detail.userface = res.data.userface;
					data_detail.createTimeText = res.data.createTimeText;
					data_detail.pictureArray = res.data.pictureArray;
					data_detail.campus = res.data.campus;
					data_detail.price = res.data.price;
					data_detail.originalPrice = res.data.originalPrice;
					data_detail.id = res.data.id;
					data_detail.messageList = res.data.messageList;
					collection.sellStatus = res.data.sellStatus;
					collection.isCollection = res.data.isCollection;
					collection.id = res.data.id;
					collection.userId = res.data.userId;
					collection.orderId = res.data.orderId;
					plus.nativeUI.closeWaiting();

				});

				function open_goods_buy() {
					//打开演员详情页面
					mui.openWindow({
						id: 'goods-buy.html',
						url: 'goods-buy.html',
						extras: {
							goodsId: data_detail.id,
						}
					});
				}

				function get_goods_info(id) {
					var res = goodsService.find_goods(id);
					console.log(JSON.stringify(res));
					data_detail.des = res.data.des;
					data_detail.nick_name = res.data.nick_name;
					data_detail.userface = res.data.userface;
					data_detail.createTimeText = res.data.createTimeText;
					data_detail.pictureArray = res.data.pictureArray;
					data_detail.campus = res.data.campus;
					data_detail.price = res.data.price;
					data_detail.originalPrice = res.data.originalPrice;
					data_detail.id = res.data.id;
					data_detail.messageList = res.data.messageList;
					
					collection.isCollection = res.data.isCollection;
					collection.id = res.data.id;
					collection.userId = res.data.userId;
		
					collection.orderId = res.data.orderId;
					
					collection.sellStatus = res.data.sellStatus;
					//				plus.nativeUI.closeWaiting();
				}

				function sendMessage(goodsId, userId, id) {
					var message = new Object();
					message.goodsId = goodsId;
					message.toUserId = userId;
					if(id != undefined) {
						message.parentMessageId = id;
					}
					message.message = $("#messageText").val();
					var res = messageService.create_message(message);
					plus.nativeUI.toast(res.msg);
					if(res.resultCode == REQUEST_SUCCESS_CDOE) {
						mui("#messageBox").popover('hide');
						$("#messageText").val(""); //置空输入框数据
						get_goods_info(goodsId); //刷新数据
					}

				}
			</script>
	</body>

</html>